import React from "react"
import {View,Text,ActivityIndicator,Dimensions,Modal,StyleSheet} from "react-native";
interface isState{
    isShow:boolean,
    text:string,
    timeout:number
}
interface Props{
    color?:string           // 文字颜色
    size?:"small"|"large"   // loading图标大小
    modalBgColor?:string    // 整个后背景
    bgColor?:string         // 中间的背景
}
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
/**
 * @Author Training
 * @Desc 加载中展示框
 */

export class LoadingControl{
    private loading: Loading;
    constructor(loading:Loading){
        this.loading = loading;
    }
    /**
     * @desc 显示loading
     * @param text 显示的文字
     * @param timeout 显示的时间  -1为一直显示
     * */
    show(text:string,timeout:number){
        this.loading.setState({isShow:true,text,timeout})
    }
    /**
     * @desc 隐藏loading
     * */
    hide(){
        this.loading.setState({isShow:false})
    }
}
export default class Loading extends  React.Component<any,isState>{
    public props:Props = {
        color:this.props.color || "#666",
        bgColor:this.props.bgColor || "white",
        modalBgColor:this.props.modalBgColor || "rgba(0,0,0,.6)",
        size:this.props.size || "small"
    }
    constructor(props:Props){
        super(props);
        this.state = {
            isShow:true,
            text:"loading...",
            timeout:2000
        }
    }

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        let {color,size,modalBgColor,bgColor} = this.props;
        return (
            <Modal
                animationType={"fade"}
                transparent={true}
                visible={this.state.isShow}
            >
                <View style={{...styles.ModalBox,backgroundColor:modalBgColor}}>
                    <View style={{...styles.LoadingBox,backgroundColor:bgColor}}>
                        <ActivityIndicator
                            color={color}
                            size={size}

                        >

                        </ActivityIndicator>
                        <View style={{paddingTop:20}}>
                            <Text style={{color}}>
                                {this.state.text}
                            </Text>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }

}
 const styles = StyleSheet.create({
     ModalBox: {
         width: SCREEN_WIDTH,
         height: SCREEN_HEIGHT,
         justifyContent:"center",
         alignItems:"center",
         // flexDirection:"row"
     },
     LoadingBox:{
         width: 100,
         height: 100,
         backgroundColor: "rgba(255,255,255,0.8)",
         borderRadius:5,
         justifyContent:"center",
         alignItems:"center"

     }
 })
